{include file="public/header" /}

<body>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-body">
            <fieldset id="searchFieldset_currentTableRenderId" class="table-search-fieldset">
              <legend>条件搜索</legend>
              <form class="layui-form layui-form-pane form-search">
                <div class="layui-form-item layui-inline">
                  <label class="layui-form-label">查看数据</label>
                  <div class="layui-input-inline">
                    <select name="isshow">
                      <option value="">仅本月数据</option>
                      <option value="1" {if !empty(input('get.isshow')) &&
                      input('get.isshow')==1}selected{/if}>全部数据</option>
                    </select>
                  </div>
                </div>
                <div class="layui-form-item layui-inline">
                  <label class="layui-form-label">上传督导</label>
                  <div class="layui-input-inline">
                    <select name="userid" lay-search="">
                      <option value="">上传督导</option>
                      {foreach $dudao as $k => $v}
                      {if $v.del == 1}
                      <option value="{$v.id}" {if !empty(input('get.userid')) &&
                        input('get.userid')==$v.id}selected{/if}>{$v.account|default=''}{if $v.del !=
                        1}账号已删除{/if}</option>
                      {/if}
                      {/foreach}
                    </select>
                  </div>
                  <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">关键字</label>
                    <div class="layui-input-inline">
                      <input type="text" name="title" placeholder="搜索文件名" value="{:input('get.title')}"
                        autocomplete="off" class="layui-input">
                    </div>
                  </div>
                </div>
                <div class="layui-form-item layui-inline">
                  <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="sreach">
                    搜索
                  </button>
                </div>
              </form>
            </fieldset>
          </div>
          <div class="layui-card-body layui-row layui-col-space10">

            共有数据：<strong id="count">{$list->total()}</strong> 条
          </div>
          <div class="layui-table-body layui-table-main">
            <table class="layui-table">
              <thead>
                <tr>
                  <th>
                    <div class="layui-table-cell">ID</div>
                  </th>
                  <th>
                    <div class="layui-table-cell">上传人</div>
                  </th>
                  <th>
                    <div class="layui-table-cell">文件类型</div>
                  </th>
                  <th>
                    <div class="layui-table-cell">查看</div>
                  </th>
                  <th>
                    <div class="layui-table-cell">创建时间/更新时间</div>
                  </th>
                </tr>
              </thead>
              <tbody>
                {foreach $list as $v}
                <tr>
                  <td>
                    <div class="layui-table-cell">{$v.id}</div>
                  </td>
                  <td>
                    <div class="layui-table-cell">{$v.dudao}</div>
                  </td>
                  <td>
                    <div class="layui-table-cell">
                      <div class="layui-table-cell">{if $v.type == 1}图片{elseif $v.type == 2}视频{else}文件{/if}</div>
                    </div>
                  </td>
                  <td>
                    {if $v.type == 1}
                    <div id="layer-photos-demo" class="layer-photos-demo">
                      {foreach $v.url as $m}
                      <img height="40" layer-pid="" layer-src="{$m.url}"
                        src="{$m.url}?x-oss-process=image/resize,h_50" />
                      {/foreach}
                    </div>
                    {/if}
                    {if $v.type == 2}
                    {foreach $v.url as $s => $m}
                    <div style="display: inline-block;background-color: aquamarine;padding:5px"
                      onclick="previewVideo('{$m.url}')">
                      查看视频{$s + 1}</div>
                    {/foreach}
                    {/if}
                    {if $v.type == 3}
                    {foreach $v.url as $m}
                    <!--<a style="display: inline-block;background-color: green;color: #fff;padding:5px" href="{$m.url}"-->
                    <!--  target="_blank">浏览器阅览</a>-->
                    <span style="display: inline-block;background-color: green;color: #fff;padding:5px"
                      onclick="download('{$m.url}','{$v.dudao}','{:date('m月d日H时i分s秒')}')">文件下载</span>
                    {/foreach}
                    {/if}
                  </td>
                  <td>
                    <div class="layui-table-cell">{$v.created|default="无"}/{$v.updated|default="无"}</div>
                  </td>
                </tr>
                {/foreach}
              </tbody>
            </table>
          </div>
          <div class="layui-card-body">
            <div class="page">{$list->render()|raw}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  {include file="public/footer"}
  <script>
    function download(url, dudao, time) {
      url = url.replace(/\\/g, '/');
      const xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.responseType = 'blob';
      xhr.onload = () => {
        if (xhr.status === 200) {
          // 获取文件blob数据并保存
          var fileName = getFileName(url, dudao, time);
          saveAs(xhr.response, fileName);
        }
      };
      xhr.send();
    }
    function saveAs(data, name) {
      var urlObject = window.URL || window.webkitURL || window;
      var export_blob = new Blob([data]);
      var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
      save_link.href = urlObject.createObjectURL(export_blob);
      save_link.download = name;
      save_link.click();
    }
    /**
    * 根据文件url获取文件名
    * @param url 文件url
    */
    function getFileName(url, dudao, time) {
      var num = url.lastIndexOf('/') + 1
      var fileName = url.substring(num)
      //把参数和文件名分割开
      fileName = decodeURI(fileName.split("?")[0]);
      var names = fileName.slice(fileName.lastIndexOf(".") + 1);
      names = dudao + '上传文件' + time + '.' + names;
      return names;
    }
    //视频预览，传url,width,height
    function previewVideo(url, width, height) {
      console.log(url);
      width = width ? width : '65%';
      height = height ? height : '65%';
      let content = '<video width="100%" height="90%"  controls="controls" autobuffer="autobuffer"  autoplay="autoplay" loop="loop">' +
        '<source src="' + url + '" type="video/mp4"></source></video>';
      layer.open({
        type: 1,
        maxmin: true, //打开放大缩小按钮
        title: '视频播放',
        area: [width, height],
        content: content,
      });
    }
    layui.use(['form', 'layer', 'laydate'], function () {
      $ = layui.jquery;
      var laydate = layui.laydate;
      var form = layui.form
        , layer = layui.layer;
      laydate.render({
        elem: '#dates' //指定元素
        , type: 'month'
      });
    });
  </script>
</body>